<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Minimal and Clean Sign up / Login and Forgot Form by FreeHTML5.co</title>

    <link rel="stylesheet" href="__INDEX__/vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="__INDEX__/css/loginstyle.css">
    <link rel="stylesheet" href="__INDEX__/css/animate.css">
    <script src="__INDEX__/js/modernizr-2.6.2.min.js"></script>
    <style>
        body {
            margin: 50px 0;
            text-align: center;

        }

        .btn {
            border: 1px solid gray;
            width: 100px;
            height: 30px;
            font-size: 18px;
            cursor: pointer;
        }
        #embed-captcha {
            width: 300px;
            margin: 0 auto;
        }
        .show {
            display: block;
        }
        .hide {
            display: none;
        }
        #notice {
            color: red;
        }
    </style>
</head>
<body class="style-2" >

<div class="container">
    <div class="row">
        <div class="col-md-4" style="margin: 15px 380px;">

            <!-- Start Sign In Form -->
            <form class="fh5co-form animate-box fadeInLeft animated-fast popup" action="{:url('/loginverify')}" method="post">
                <h2 style="background: #67E0F3;height:72px;color:#fff;text-align: center;line-height: 72px;border-radius: -2% !important;width: 360px;margin-left: -30px;margin-top: -30px;">登&nbsp;&nbsp;&nbsp;录</h2>
                <div class="form-group">
                    <label for="username" class="sr-only">Username</label>
                    <input type="text" class="form-control" id="username" placeholder="手机号" autocomplete="off" name="name">
                </div>
                <div class="form-group">
                    <label for="password" class="sr-only">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="密码" autocomplete="off" name="pwd">

                </div>
                <!--滑块验证-->
                <div id="embed-captcha"></div>
                <p id="wait" class="show" style="color:#33CCCC">正在加载验证码......</p>
                <p id="notice" class="hide">请先完成验证</p>

                <div class="form-group" style="text-align: left">
                    <label for="remember"><input type="checkbox" id="remember" name="status"> 记住我</label>
                </div>
                <div style="text-align: left;margin-top:-15px;" >
                    <a href="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101455929&redirect_uri=http://www.weiweiping.top/qqlogin.php&scope=jp" style="display:inline-block;background:url('__INDEX__/img/qqicon.jpg');width:35px;height:26px;"></a>
                </div>
                <div class="form-group" style="text-align: left;">
                    <p>还未注册? <a href="{:url('/register')}">去注册</a>
                </div>
                <div class="form-group">
                    <input type="submit" id="embed-submit" value="登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录" class="btn btn-primary" style="width:300px;height:50px;border:none">
                </div>
            </form>
            <!-- END Sign In Form -->

        </div>
    </div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script src="__INDEX__/js/gt.js"></script>
<script>
    var handlerEmbed = function (captchaObj) {
        $("#embed-submit").click(function (e) {
            var validate = captchaObj.getValidate();
            if (!validate) {
                $("#notice")[0].className = "show";
                setTimeout(function () {
                    $("#notice")[0].className = "hide";
                }, 2000);
                e.preventDefault();
            }
        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };

        $.ajax({
        // 获取id，challenge，success（是否启用failback）
        url: "/loginstart/" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            console.log(data);
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha,
                product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerEmbed);
        }
    });

</script>
</body>
</html>

